<template>
    <div style="padding: 18px;text-align: center;">
        <div style="display: flex;">
            <img width="120px" height="120px" :src="avatarUrl" class="avatar"/>
            <div style="padding-left: 20px;min-width: 300px;">
                <input v-model="userName" placeholder="请输入用户名"/>
                <br/>
                <input v-model="nickName" placeholder="请输入客服昵称"/>
                <br/>
                <input v-model="userPwd" placeholder="请输入密码"/>
                <br/>
                <input v-model="weight" placeholder="权重比" type="number"/>
                <br/>
            </div>
        </div>
        <a @click="createSupport" class="btn btn-info btn-block" style="margin-top: 20px;">
            <template v-if="support == null">创建客服</template><template v-else>更新客服</template>
        </a>
    </div>
</template>

<script>
    export default {
        name: 'Structure',
        data () {
            return {
                userName: '',
                userPwd: '',
                nickName: '',
                weight:100,
                avatarUrl: '/imgs/default.png'
            }
        },
        props: ["group","support"],
        methods: {
            createSupport: function () {
                const that = this;
                if(that.support != null){
                    $.post('/group/user/update', {
                        supportId:this.support.id,
                        groupId: this.group.id,
                        avatar: this.avatarUrl,
                        nickName: this.nickName,
                        userName: this.userName,
                        userPwd: this.userPwd,
                        weight:this.weight
                    }, function (result) {
                        that.support.nickName = that.nickName;
                        that.support.avatar = that.avatar;
                        that.support.userName = that.userName;
                        that.support.weight = that.weight;
                        that.$emit('editSupportSuccess');
                    });
                }else{
                    $.post('/group/user/register', {
                        groupId: this.group.id,
                        avatar: this.avatarUrl,
                        nickName: this.nickName,
                        userName: this.userName,
                        userPwd: this.userPwd,
                        weight:this.weight
                    }, function (result) {
                        that.$emit('addSupportSuccess', result);
                    });
                }
            }
        },
        mounted(){
            const that = this;
            if(that.support != null){
                that.userName = that.support.userName;
                that.nickName = that.support.nickName;
                that.weight = that.support.weight;
                that.avatarUrl = that.support.avatarUrl;
            }
            $('.avatar').QiniuUpload({
                key: 'athena-support',
                callback: function (evt, result) {
                    that.avatarUrl = that.as.getImageUrl() + result.key;
                },
                error:function () {
                    console.log("error");
                }
            }, '/upload/token?bucket=athena-support&key=');
        },
    }
</script>

<style scoped>
    .avatar {
        border: 3px solid #f7f7f7;
        border-radius: 50%;
    }

    input {
        width: 100%;
        border: none;
        outline: none;
        font-size: 14px;
        padding: 8px;
        border-bottom: 1px solid #f3f3f3;
    }

    input:focus {
        border-bottom: 1px solid rgba(65, 161, 183, 0.5);

    }
</style>
